<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<uni-nav-bar fixed statusBar :backgroundColor="`var(--bg-27)`" :border="false" @clickLeft="clickLeft">
				<text class="page-title">{{$t('Page.mine.tdxq')}}</text>
				<view class="left-icon" slot="left"> </view>
			</uni-nav-bar>
		</match-media>
		<view class="content">
			<match-media :min-width="MAX_SIZEiZE">
				<view class="pc-back" @click.prevent="clickLeft">
					<view class="back-cont">
						<view class="back-icon"> </view>
						<view class="back-text"> {{$t('Page.notify.back')}} </view>
					</view>
					<text class="page-title">{{$t('Page.mine.tdxq')}} </text>
				</view>
			</match-media>
			<view class="cc-newsTabs-wrap">
				<cc-newsTabs :curIndex="curTabIndex" :tabArr="tabArr" @tabChange="tabChange"></cc-newsTabs>
			</view>
			<view class="list-header">
				<view class="header-item" v-for="(item,index) in titles">
					{{item.title}}
				</view>
			</view>
			<scroll-view refresher-default-style="white" refresher-background="transparent" refresher-enabled
				scroll-with-animation :refresher-triggered="triggered" @refresherrefresh="refresherrefresh"
				:scroll-top="scrollTop" @scroll="onScroll" scroll-y="true" :style="{height:scrollHeight}"
				class="scroll-Y" @scrolltolower="lower">

				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="item-text">
						{{item.username}}
					</view>
					<view class="item-text">
						{{item.origin_money}}
					</view>
					<view class="item-text">
						{{item.money}}
					</view>
					<view class="item-text">
						{{$tools.timeFormat(item.createtime, 'yyyy/mm/dd hh:MM')}}
					</view>
				</view>
				<uni-load-more :status="status" :contentText="contentText"></uni-load-more>
			</scroll-view>
		</view>
		<backToTop :isShow="isShow" @scrollToTop="scrollToTop"></backToTop>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		Debounce
	} from '@/utils/common.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		data() {
			return {
				MAX_SIZEiZE,
				scrollTop: 0,
				curTabIndex: 0, //当前显示的tabItem   
				tabArr: [{
						name: this.$t('Page.mine.all')
					}, {
						name: this.$t('Page.mine.zsdl')
					},
					{
						name: this.$t('Page.mine.ejdl')
					},
					{
						name: this.$t('Page.mine.sjdl')
					}
				],
				titles: [{
						title: this.$t('Page.mine.btzh')
					},
					{
						title: this.$t('Page.mine.btcz')
					},
					{
						title: this.$t('Page.mine.btyj')
					},
					{
						title: this.$t('Page.mine.btsj')
					}
				],
				searchParams: {
					level: '',
					page: 1,
					page_ini: 21
				},
				totalCount: 0,
				status: 'loading', //  more/loading/noMore
				contentText: {
					contentdown: this.$t('Page.loadmore.xl'),
					contentrefresh: this.$t('Page.loadmore.jzz'),
					contentnomore: this.$t('Page.loadmore.mygdl')
				},
				list: [],
				statusBarHeight: 0,
				scrollTop: 0,
				isShow: false, // 控制是否显示返回顶部按钮
				triggered: false,
				triggerHeight: Math.ceil(uni.getSystemInfoSync().windowHeight / 2.5)
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme,
				windowSize: state => state.app.windowSize
			}),

			scrollHeight() {
				// if (this.windowSize.windowHeight <= 768) {
				// #ifdef H5
				return `calc(100vh - 70px - 70px - ${this.statusBarHeight}px)`
				// #endif
				// #ifdef APP-PLUS
				return `calc(100vh - 70px - 70px - ${this.statusBarHeight}px)`
				// #endif
				// } else {
				// 	return 'calc(100vh - 70px - 70px - 110px - 30px)'
				// }
			},
		},
		onLoad(option) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			if (option.index) {
				this.curTabIndex = this.searchParams.level = +option.index
			}
			this.getDetail()
		},
		methods: {
			scrollToTop(e) {
				this.scrollTop = 0
				this.isShow = e
			},
			refresherrefresh(e) {
				this.triggered = true
				this.list = [];
				setTimeout(() => {
					this.searchParams.page = 1;
					this.getDetail();
				}, 500)
			},

			onScroll: Debounce(function(e) {
				this.scrollTop = e.detail.scrollTop
				if (e.detail.scrollTop >= this.triggerHeight) {
					this.isShow = true
				} else {
					this.isShow = false
				}
			}, 500),
			tabChange(index) {
				if (this.curTabIndex === index) return;
				this.curTabIndex = index
				this.searchParams.level = index === 0 ? '' : index
				this.searchParams.page = 1;
				this.searchParams.page_ini = 21
				this.getDetail()
			},
			lower(e) {
				if (this.list.length < this.totalCount) {
					this.status = 'loading'
					this.searchParams.page++
					// 加个延时，loading效果不要消失太快
					setTimeout(() => {
						this.getDetail()
					}, 500)
				}
			},
			getDetail() {
				const {
					DETAIL
				} = this.$api
				sendMessage({
					flag: DETAIL,
					content: this.searchParams
				})
				uni.$once(DETAIL, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.triggered = false
						if (this.searchParams.page === 1) {
							this.list = data.list
							this.totalCount = data.count
						} else {
							this.searchParams.page_ini = 10
							this.list = [...this.list, ...data.list]
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}

					if (this.list.length < this.totalCount) {
						setTimeout(() => {
							this.status = 'more'
						}, 1000)
					} else {
						this.status = 'noMore'
					}
				})
			},
			clickLeft() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
					console.log(230)
				} else {
					console.log(232)
					// #ifdef H5
					history.back();
					// #endif
					// #ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/Mine/myTeam'
					})
					// #endif
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	// 默认样式 结构   
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.page-title {
			width: 100%;
			margin: auto;
			height: 44px;
			line-height: 44px;
			font-size: 20px;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			text-align: center;
		}

		.left-icon {
			width: 22px;
			height: 22px;
			background: url('@/static/image/back-icon.png') no-repeat;
			background-size: contain;
		}

		.right-icon {
			width: 22px;
			height: 22px;
		}

		.content {
			width: 100%;
			min-height: calc(100vh - 50px - var(--status-bar-height));
			padding: 0 15px;
			background: var(--bg-3);
			box-sizing: border-box;

			.tab_box {
				width: 100%;
				height: 40px;
				display: flex;
				align-items: center;
				overflow-x: auto;

				.tab-cont {
					width: 100%;
					height: 40px;
					display: flex;
					align-items: center;

					.tab-item {
						flex: 1;
						text-align: center;
						line-height: 40px;
						margin-right: 33px;
						font-size: 14px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						cursor: pointer;
						color: #82858B;
						line-height: 18px;
						box-sizing: border-box;

						&:last-child {
							margin-right: 0;
						}

						.tab_text {
							margin-left: 5px;
							font-size: 28rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.list-header {
				width: 100%;
				font-size: 15px;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: var(--color-1);
				height: 40px;
				display: flex;
				align-items: center;

				.header-item {
					text-align: center;
					flex: 1;
				}
			}

			.scroll-Y {

				.list-item {
					width: 100%;
					padding: 10px 5px;
					display: flex;
					align-items: center;
					color: #fff;

					.item-text {
						flex: 1;
						text-align: center;
						word-break: break-all;
						margin-right: 15px;

						&:last-child {
							margin-right: 0;
						}
					}
				}

				/* 隐藏竖向滚动条 */
				::-webkit-scrollbar {
					display: none;
				}

			}

			.range-wrap {
				width: 100%;
				height: 55px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				position: relative;

				.time {
					flex: 1;
					position: relative;
					font-size: 14px;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #FFFFFF;
					height: 35px;
					line-height: 35px;
					text-align: center;
					background: rgba(98, 76, 71, 1);
					border-radius: 20px;

					&::after {
						content: '';
						position: absolute;
						right: 22px;
						top: 50%;
						transform: translateY(-50%);
						width: 0;
						height: 0;
						border: 8rpx solid transparent;
						border-top-color: #FFFFFF;
					}

					&/deep/.uni-input {
						height: 35px;
						line-height: 35px;
						border-radius: 15px;
						background: transparent;
						padding: 0;

					}
				}

				.line {
					width: 20px;
					height: 2px;
					background: rgba(98, 76, 71, 1);
					border-radius: 200rpx;
					margin: 0 15px;
				}

			}


			.card-wrap {
				width: 100%;
				display: flex;
				flex-direction: column;
				margin-top: 10px;

				.card {
					display: flex;
					flex-direction: column;
					background-color: rgba(204, 181, 155, 0.10);
					border-radius: 15px;
					font-size: 13px;
					margin-bottom: 10px;
					padding: 10px 15px;
					box-sizing: border-box;

					.top {
						height: 22px;
						line-height: 22px;
						font-size: 15px;
						text-align: center;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 55px;
						margin-top: 15px;


						.center-item {
							flex: 1;
							height: 55px;
							background: rgba(108, 72, 58, 1);
							border-radius: 10px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-between;
							margin-right: 10px;

							&:last-child {
								margin-right: 0;
							}

							view:first-child {
								color: rgba(255, 255, 255, 0.90);
								text-align: center;
							}

							view:nth-child(2) {
								font-size: 28rpx;
								color: rgba(231, 72, 26, 1);
							}
						}
					}

					.bottom {
						display: flex;
						flex-direction: column;
						box-sizing: border-box;
						margin-top: 20px;

						view {
							height: 22px;
							line-height: 22px;
							font-size: 13px;
							color: #AB988F;
						}
					}
				}
			}
		}
	}

	// PC
	@media screen and (max-width: 768px) {
		.active {
			color: #fff !important;
			-webkit-background-clip: text;
			position: relative;

			&::before {
				content: '';
				position: absolute;
				bottom: -8px;
				left: 50%;
				transform: translateX(-50%);
				width: 8px;
				height: 4px;
				background: rgba(231, 72, 26, 1);
				border-radius: 20px;
				opacity: 1;
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.cc-newsTabs-wrap {
				margin-top: 30px;
			}

			.pc-back {
				width: 100%;
				padding: 0 30px;
				height: 60px;
				display: flex;
				align-items: center;
				background: var(--bg-24);
				border-radius: 30px;
				margin: 10px auto 0;
				box-sizing: border-box;

				.back-cont {
					display: flex;
					align-items: center;
					height: 30px;
					padding: 0 10px;
					border-radius: 100px;
					background: var(--bg-25);
					cursor: pointer;

					.back-icon {
						width: 13px;
						height: 11px;
						background: url('@/static/image/back-icon.png') no-repeat;
						background-size: contain;
					}

					.back-text {
						font-size: 13px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 18px;
						margin-left: 5px;
					}
				}

				.page-title {
					width: fit-content !important;
					margin-left: 15px;
				}

			}

			.content {
				width: 100%;
				min-height: calc(100vh - 70px) !important;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				background: var(--bg-3);
				padding: 0 30px 30px;
				box-sizing: border-box;

				.tab_box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 30px 0;

					.tab-cont {
						display: flex;
						justify-content: flex-start !important;
						margin-right: 15px;
						height: 50px;

						.tab-item {
							flex: 0;
							width: fit-content;
							padding: 0 15px;
							height: 35px;
							line-height: 35px;
							color: rgba(255, 255, 255, 0.40);
							border-radius: 100px;
							margin-right: 15px;

							&:last-child {
								margin-right: 0;
							}
						}

						.active {
							color: #fff !important;
							position: relative;
							background: rgba(231, 72, 26, 1) !important;
							color: #fff;

							&::before {
								opacity: 0 !important;
							}
						}
					}

					.range-wrap {
						width: 350px;
						box-sizing: border-box;
					}
				}

				.card-wrap {
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(345px, 1fr));
					// grid-template-columns: 1fr 1fr 1fr;
					/* 三列等宽 */
					gap: 30px;
					margin-top: 50px;
				}
			}
		}
	}

	/deep/.calendar-area {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
</style>